﻿@model IEnumerable<PerformanceAssessment.Models.SkillsPerTeam>
<style>
    .ui-selectable
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
        min-height:300px;
        background-color:#EEE;
    }
    .ui-selectable li
    {
        margin: 3px;
        padding: 0.4em;
        font-size: 1em;
        height: 12px;
        width: 300px;
    }
    .ar_button
    {
        width: 30px;
        display: block;
        text-align: center;
        font: inherit;
    }
    .selectable-list
    {
        float: left;
        border:1px solid #333;
        overflow:auto;
        height:300px;
        min-width: 300px;
    }
</style>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#availableSkills").sortable({
            connectWith: "#selectedSkills"
        });

        $("#selectedSkills").sortable({
            connectWith: "#availableSkills"
        });

        $("#availableSkills, #selectedSkills").disableSelection();

        $("#dialog-message").dialog({
            modal: true,
            autoOpen:false,
            buttons: {
                Ok: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
    
    //Object to send data to the controller
    function SkillPerTeamObj(IdTeam, IdSkill, DisplayOrder) {
        this.IdSkill = IdSkill;
        this.IdTeam = IdTeam;
        this.DisplayOrder = DisplayOrder;
    }

    function saveSkillsPerTeam() {
        var skills = new Array();
        var order = 0;
        var teamId = $("#teamsSel").val();
        $("#selectedSkills li span").each(function () {
            skills.push(new SkillPerTeamObj(teamId, this.innerHTML, order));
            order = order + 1;
        });

        $.ajax({
            url: '/Skill/SkillsPerTeam?teamId=' + teamId,
            data: JSON.stringify(skills),
            type: 'post',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function () {
                $("#dialog-message").dialog("open");
            }
        });
    }
    function addAll() {
        var listS = $("#selectedSkills");
        $("#availableSkills li").each(function () {
            listS.append(this);
        });
        return false;
    }

    function removeAll() {
        var listA = $("#availableSkills");
        $("#selectedSkills li").each(function () {
            listA.append(this);
        });
        return false;
    }
</script>
<div id="dialog-message" title="Save Successful">
	<p>
		<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
		The Skills have been assigned to the Team successfully.
	</p>
</div>

<div class="editor-label">
    @Html.Label("Available Skills")
</div>
<div id="skEditor" class="editor-field" style="width: 800px;">
    <div class="selectable-list" >
        <ul id="availableSkills" class="ui-selectable">
            @foreach (var skill in ViewBag.AvailableSkills)
            {
                <li><span style="display: none">@skill.ID</span>@skill.Name</li>
            }
        </ul>
    </div>
    <div style="float: left; min-width: 30px;">
        <input type="button" class="ar_button" value="<<" onclick="removeAll()" />
        <input type="button" class="ar_button" value=">>" onclick="addAll()" />
    </div>
    <div class="selectable-list">
        <ul id="selectedSkills" class="ui-selectable">
            @foreach (var selectedSkill in ViewBag.SelectedSkills)
            {
                <li><span style="display: none">@selectedSkill.ID</span>@selectedSkill.Name</li>
            }
        </ul>
    </div>
</div>
<div style="clear:both;"/>
<br/>
<input type="button" id="saveChanges" value="Save Assignment" onclick="saveSkillsPerTeam()"/>